/**
* 左边菜单
*/
<template>
	<el-menu
		default-active="2"
		:collapse="collapsed"
		collapse-transition
		router
		:default-active="$route.path"
		unique-opened
		class="el-menu-vertical-demo"
		background-color="#334157"
		text-color="#fff"
		active-text-color="#ffd04b"
	>
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="" />
		</div>
		<el-submenu
			v-for="menu in allmenu"
			:key="menu.menuid"
			:index="menu.menuname"
		>
			<template slot="title">
				<i class="iconfont" :class="menu.icon"></i>
				<span>{{ menu.menuname }}</span>
			</template>
			<el-menu-item-group>
				<el-menu-item
					v-for="chmenu in menu.menus"
					:index="'/' + chmenu.url"
					:key="chmenu.menuid"
				>
					<i class="iconfont" :class="chmenu.icon"></i>
					<span>{{ chmenu.menuname }}</span>
				</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
	</el-menu>
</template>
<script>
import { menu } from "../api/userMG";
export default {
	name: "leftnav",
	data() {
		return {
			collapsed: false,
			allmenu: [],
		};
	},
	// 创建完毕状态(里面是操作)
	created() {
		// 获取图形验证码
		let res = {
			success: true,
			data: [
				{
					menuid: 11,
					icon: "li-icon-xiangmuguanli",
					menuname: "系统设置",
					hasThird: null,
					url: null,
					menus: [
						{
							menuid: 111,
							icon: "icon-cat-skuQuery",
							menuname: "跟单001",
							hasThird: "N",
							url: "pay/Config",
							menus: null,
						},
						{
							menuid: 112,
							icon: "icon-cat-skuQuery",
							menuname: "跟单002",
							hasThird: "N",
							url: "pay/Config002",
							menus: null,
						},
						{
							menuid: 113,
							icon: "icon-cat-skuQuery",
							menuname: "跟单003",
							hasThird: "N",
							url: "pay/Config003",
							menus: null,
						},
						{
							menuid: 114,
							icon: "icon-cat-skuQuery",
							menuname: "跟单004",
							hasThird: "N",
							url: "pay/Config004",
							menus: null,
						},
						{
							menuid: 115,
							icon: "icon-cat-skuQuery",
							menuname: "跟单005",
							hasThird: "N",
							url: "pay/Config005",
							menus: null,
						},
						{
							menuid: 116,
							icon: "icon-cat-skuQuery",
							menuname: "跟单006",
							hasThird: "N",
							url: "pay/Config006",
							menus: null,
						},
						{
							menuid: 117,
							icon: "icon-cat-skuQuery",
							menuname: "跟单007",
							hasThird: "N",
							url: "pay/Config007",
							menus: null,
						},
						{
							menuid: 118,
							icon: "icon-cat-skuQuery",
							menuname: "跟单008",
							hasThird: "N",
							url: "pay/Config008",
							menus: null,
						},
						{
							menuid: 119,
							icon: "icon-cat-skuQuery",
							menuname: "跟单009",
							hasThird: "N",
							url: "pay/Config009",
							menus: null,
						},
						{
							menuid: 120,
							icon: "icon-cat-skuQuery",
							menuname: "跟单010",
							hasThird: "N",
							url: "pay/Config010",
							menus: null,
						},
						// {
						// 	menuid: 121,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单011",
						// 	hasThird: "N",
						// 	url: "pay/Config011",
						// 	menus: null,
						// },
						// {
						// 	menuid: 122,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单012",
						// 	hasThird: "N",
						// 	url: "pay/Config012",
						// 	menus: null,
						// },
						// {
						// 	menuid: 123,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单013",
						// 	hasThird: "N",
						// 	url: "pay/Config013",
						// 	menus: null,
						// },
						// {
						// 	menuid: 124,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单014",
						// 	hasThird: "N",
						// 	url: "pay/Config014",
						// 	menus: null,
						// },
						// {
						// 	menuid: 125,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单015",
						// 	hasThird: "N",
						// 	url: "pay/Config015",
						// 	menus: null,
						// },
						// {
						// 	menuid: 126,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单016",
						// 	hasThird: "N",
						// 	url: "pay/Config016",
						// 	menus: null,
						// },
						// {
						// 	menuid: 127,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单017",
						// 	hasThird: "N",
						// 	url: "pay/Config017",
						// 	menus: null,
						// },
						// {
						// 	menuid: 128,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单018",
						// 	hasThird: "N",
						// 	url: "pay/Config018",
						// 	menus: null,
						// },
						// {
						// 	menuid: 129,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单019",
						// 	hasThird: "N",
						// 	url: "pay/Config019",
						// 	menus: null,
						// },
						// {
						// 	menuid: 130,
						// 	icon: "icon-cat-skuQuery",
						// 	menuname: "跟单020",
						// 	hasThird: "N",
						// 	url: "pay/Config020",
						// 	menus: null,
						// },
					],
				},
				{
					menuid: 21,
					icon: "li-icon-xiangmuguanli",
					menuname: "操作记录",
					hasThird: null,
					url: null,
					menus:[
					    {
							menuid: 211,
							icon: "icon-cat-skuQuery",
							menuname: "跟单记录",
							hasThird: "N",
							url: "pay/Order",
							menus: null,
						},
						{
							menuid: 212,
							icon: "icon-cat-skuQuery",
							menuname: "异常记录",
							hasThird: "N",
							url: "pay/Exception",
							menus: null,
						},
					]
				}
			],
			msg: "success",
		};
		this.allmenu = res.data;

		// menu(localStorage.getItem('logintoken'))
		//   .then(res => {
		//     console.log(JSON.stringify(res))
		//     if (res.success) {
		//       this.allmenu = res.data
		//     } else {
		//       this.$message.error(res.msg)
		//       return false
		//     }
		//   })
		//   .catch(err => {
		//     this.$message.error('菜单加载失败，请稍后再试！')
		//   })
		// 监听
		this.$root.Bus.$on("toggle", (value) => {
			this.collapsed = !value;
		});
	},
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 240px;
	min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	border: none;
	text-align: left;
}
.el-menu-item-group__title {
	padding: 0px;
}
.el-menu-bg {
	background-color: #1f2d3d !important;
}
.el-menu {
	border: none;
}
.logobox {
	height: 40px;
	line-height: 40px;
	color: #9d9d9d;
	font-size: 20px;
	text-align: center;
	padding: 20px 0px;
}
.logoimg {
	height: 40px;
}
</style>
